<template>
  <div v-if="viewLoading">
    <van-panel>
      <div slot="header" class="van-cell van-hairline van-panel__header">
        <div class="van-cell__title">
          <span>静态余额: {{ Math.round(models.user_wallet.static, 2) }}分</span>
          <div class="van-cell__label">当前预约币: {{ models.user_wallet.appointment }}个</div>
        </div>
      </div>

      <van-cell-group>
        <van-field class="van-cell--center" type="number" placeholder="请输入数量" name="amount" required readonly
          label="数量" v-model="formFields.amount" @click="actionsheetShowAmount = true"
          :error="$validator.errors.has('amount')" :error-message="$validator.errors.first('amount')"
          data-vv-as="数量" v-validate="{required: true}"
        />

        <van-field class="van-cell--center" type="password" placeholder="请输入安全密码" name="safe_password" required
          label="安全密码" v-model="formFields.safe_password"
          :error="errors.has('safe_password')" :error-message="errors.first('safe_password')"
          data-vv-as="安全密码" v-validate="{required: true, min: 6}"
        />
      </van-cell-group>

      <van-button size="small" type="primary" :loading="onButtonLoading" @click="onSubmit" style="width: 100%;">排单</van-button>
    </van-panel>

    <van-actionsheet v-model="actionsheetShowAmount" :actions="actionsheetActionsAmount" />
  </div>
</template>

<script>
  import { Actionsheet, Button, Cell, CellGroup, Field, Panel, Toast } from 'vant';
  import { mapState } from 'vuex';
  import userMutuallyBuyApi from '@/api/user/mutually/buy/index';

  export default {
    components: {
      [Actionsheet.name]: Actionsheet,
      [Button.name]: Button,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field,
      [Panel.name]: Panel
    },
    data() {
      return {
        actionsheetShowAmount: false,
        actionsheetActionsAmount: [],
        onButtonLoading: false,
        formFields: {
          amount: '',
          parameters: '',
          parameters_key: '',
          safe_password: ''
        },
        viewLoading: false
      };
    },
    methods: {
      onSubmit() {
        this.onButtonLoading = true;
        this.$validator.validateAll().then((isValid) => {
          if(isValid) {
            userMutuallyBuyApi.createByToken(this.formFields).then((res) => {
              Toast(res.msg);
              this.onButtonLoading = false;
              this.formFields = {
                amount: '',
                parameters: '',
                parameters_key: '',
                safe_password: ''
              };
              return true;
            });
          } else {
            Toast('请输入必要栏目');
            this.onButtonLoading = false;
          }

          return false;
        });
      },
      actionsheetCallbackAmount(action) {
        this.formFields.amount = action.amount;
        this.formFields.parameters = action.parameters;
        this.formFields.parameters_key = action.parameters_key;
        this.actionsheetShowAmount = false;
      }
    },
    computed: mapState({
      models: state => state.user,
      configApi: state => {
        return state.configApi;
      },
    }),
    created() {
      this.$store.dispatch('configApi/get').then((res) => {
        let parameters = this.configApi.parameters;
        for(let i in parameters.USER_MUTUALLY_BUY_STATIC.value) {
          this.actionsheetActionsAmount.push({
            parameters: 'USER_MUTUALLY_BUY_STATIC',
            parameters_key: i,
            name: parameters.USER_MUTUALLY_BUY_STATIC.value[i].value.amount,
            amount: parameters.USER_MUTUALLY_BUY_STATIC.value[i].value.amount,
            callback: this.actionsheetCallbackAmount
          });
        }
      });
      this.$store.dispatch('user/findFirstByTokenIsEmpty').then((res) => {
        this.viewLoading = true;
        if(res.code != 0) {
          Toast(res.msg);
          return false;
        }
      }).catch((err) => {
        this.viewLoading = true;
      });
    }
  };

</script>
